<template>
  <div>
    <backHeader pageTitle="观看历史" />
    <div class="container" id="container" ref="container">
      <div class="history">
        <ul>
          <li>
            <h4 style="color:#000000;">我的看片历史</h4>
          </li>
          <li v-for="item in history" :key="item.id">
            <span>{{item.name | nameFormat}} - [{{item.index}}]</span>
            <span style="float:right;margin-right:25px;">
              <router-link :to="{path:'detail', query:{movieId:item.id,index:item.index}}">
              继续</router-link>
            </span>
            <span style="float:right;margin-right:25px;">
              <router-link :to="{path:'detail', query:{movieId:item.id,index:item.index+1}}">
              下一集</router-link>
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import backHeader from "@/components/public/backHeader.vue";
import { size, sizeType } from "@/lib/getSize.js";
export default {
  namr: "history",
  data() {
    return {
      history: [],
      device: ""
    };
  },
  mounted() {
    this.initLayout();
    var list = JSON.parse(localStorage.getItem("myhistory") || "[]");
    this.history = list;
  },
  methods: {
    /*
      布局相关
    */
    initLayout() {
      //初始化容器.
      this.device = size.getDeviceType();
      let rectSize = size.GET(sizeType.document);
      this.$refs.container.style.width = rectSize.width + "px";
      this.$refs.container.style.height = rectSize.height - 40 + "px";
      this.$refs.container.style.marginTop = "40px";
    }
  },
  components: {
    backHeader
  },
  filters:{
    nameFormat(value){
      //格式化详细介绍.
      let n =
        size.getDeviceType() == "web"
          ? 30
          : size.getDeviceType() == "pad"
          ? 20
          : 13;
      if (value) {
        if (value.length > n) {
          return value.substring(0, n) + "...";
        } else {
          return value;
        }
      }
    }
  }
};
</script>

<style scoped>
.container {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  clear: both;
  background-color: hsl(0, 0%, 96%);
  width: 100%;
  overflow-y: auto;
}
.history {
  width: 100%;
}
.history ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  margin-left: 35px;
  margin-right: 10px;
}

.history ul li {
  list-style: none;
  text-align: left;
  color: #409eff;
  font-size: 13px;
  height: 28px;
  line-height: 28px;
}
</style>